<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>21-jQuery文本值操作方法</title>
    <style>
      div{
        width:100px;
        height:100px;
        background-color:palegoldenrod;
      }
    </style>
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
      $(
        function(){
          var btns = document.getElementsByTagName('button');
          // 2..html()方法
          btns[0].onclick = function(){
            $("div").html("<p>我是一个代码块</p>")    //为div添加代码块(子元素)
          }
          btns[1].onclick = function(){
            console.log($("div").html())    //获取并打印子元素
          }
          // 2..text()方法
          btns[2].onclick = function(){
            $("div").text('<p>这是一个假的子元素</p>')    //为div设置文本内容
          }
          btns[3].onclick = function(){
            console.log($("div").text())    //查看div的文本内容，并打印
          }
          // 3..val()方法
          btns[4].onclick = function(){
            $("input").val('请输入你的账号')    //为input输入框设置value值
          }
          btns[5].onclick = function(){
            $("input").val()    //查看input输入框的value值
          }
        }
      )
    </script>
</head>
<body>
    <button>设置html</button>
    <button>获取html</button>
    <button>设置text</button>
    <button>获取text</button>
    <button>设置val</button>
    <button>获取val</button>
    <div></div>
    <input type="text">
</body>
</html>